<template>
	<view>
		<view class="head">
			<view class="headb">
				<view class="inputbox">
					<input type="text" value="" />
				</view>
				<view class="iconfont icon-sousuo"></view>
				<view class="iconfont icon-xiangji"></view>
				<view class="navbox">
					<view v-for="(item,index) in arr" class="nav">{{item}}</view>
					<view class="iconfont icon-xiala1"></view>
				</view>
			</view>
		</view>

		<view class="lunbo">
			<view class="content">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="ture"
					style="height: 120px">
					<swiper-item v-for="(item,index) in arr2" :key="index">
						<image :src="item" class="banner" style="height: 120px;"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<swiper :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in arr3" :key="index">
				<view class="bigbox">
					<view class="icfontbox" v-for="(items,indexs) in item.arr1" :key="indexs">
						<view :class="items.tubiao"></view>
						<view class="biaoti">{{items.biaoti}}</view>
					</view>
				</view>
				<view class="bigbox">
					<view class="icfontbox" v-for="(items,indexs) in item.arr2" :key="indexs">
						<view :class="items.tubiao"></view>
						<view class="biaoti">{{items.biaoti}}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<view class="box">
			<view class="title">
				<view class="seckillingbox">
					<view class="seckilling">
						京东秒杀
					</view>
					<view class="time">
						<text class="times">8点场</text>
						<text class="countdown">00:00:00</text>
					</view>
				</view>
				<view class="snapupbox">
					<view class="snapup">
						更多好货限时疯抢
					</view>
					<view class="iconfont icon-xiangyou"></view>
				</view>
			</view>

			<!-- 限时疯抢内容 -->
			<view class="scrollbox">
				<scroll-view scroll-x="true" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"
					style="white-space: nowrap; display: flex;">
					<view class="ones" v-for="(item,index) in arr4" key="index">
						<image :src="item.image" mode="" class="tu"></image>
						<view class="nowprice">
							<text class="dollar">￥</text>{{item.nowprice}}
						</view>
						<view class="oldprice" style="text-decoration: line-through;">
							￥{{item.oldprice}}
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 横线 -->
			<view class="wire"></view>

			<view class="recommendbox">
				<view class="recommend">
					<view class="name">品牌闪购</view>
					<view class="special1 special">大牌限时特卖</view>
					<image src="../../static/xie.jpg" mode="" class="recommendimg"></image>
				</view>

				<view class="recommend">
					<view class="name">排行榜</view>
					<view class="special2 special">跟榜购好物</view>
					<image src="../../static/xie.jpg" mode="" class="recommendimg"></image>
				</view>

				<view class="recommend">
					<view class="name">每日特价</view>
					<view class="special3 special">9块9疯抢</view>
					<image src="../../static/xie.jpg" mode="" class="recommendimg"></image>
				</view>

				<view class="recommend">
					<view class="name">新品首发</view>
					<view class="special4 special">全网抢先</view>
					<image src="../../static/xie.jpg" mode="" class="recommendimg"></image>
				</view>

			</view>
			<!-- 横线 -->
			<view class="wire"></view>


			<!-- 东家小院 -->
			<view class="courtyardbox">
				<view class="courtyard">
					<view class="master">
						东家小院
					</view>
					<view class="seeding">
						小院种草 >
					</view>
				</view>
				<view class="courtyard courtyard1">
					<view class="master">
						东京直播
					</view>
					<view class="promote">
						主播力荐 >
					</view>
				</view>
			</view>
			<view class="imagesbox">
				<image v-for="(item,index) in imgarr" :key="index" :src="item" mode="" class="courtyardimage">{{item}}
				</image>
			</view>
		</view>

		<view class="lastbox" v-for="(item,index) in lastarr" :key="index">
			<view class="portionbox" @click="pathTo">
				<image :src="item.image" mode="" class="tu"></image>
				<text class="cont">
					{{item.cont}}
				</text>
				<view class="floorpricebox">
					<text></text>
					<text>90天最低价</text>
				</view>
				<view class="price">
					<text class="priceone">￥</text>
					<text class="pricetwo">{{item.price}}.</text>
					<text class="priceone">00</text>
					<text class="pricedel">￥{{item.delprice}}</text>
					<text class="seckill">秒杀</text>
				</view>
				<view class="commentbox">
					<text>{{item.comment}}条评论</text>
					<text class="percent">{{item.percent}}</text>
					<text></text>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				lastarr: [{
					image: "../../static/9.jpg",
					cont: "木月北欧推拉门衣柜组合卧室简约现代滑门移动大衣柜储物收纳衣柜 雅致 单衣柜1.6米（三门",
					price: "1515",
					delprice: "2300",
					comment: "1000+",
					percent: "98%好评率"
				}, {
					image: "../../static/9.jpg",
					cont: "木月北欧推拉门衣柜组合卧室简约现代滑门移动大衣柜储物收纳衣柜 雅致 单衣柜1.6米（三门",
					price: "1515",
					delprice: "2300",
					comment: "1000+",
					percent: "98%好评率"
				}, {
					image: "../../static/9.jpg",
					cont: "木月北欧推拉门衣柜组合卧室简约现代滑门移动大衣柜储物收纳衣柜 雅致 单衣柜1.6米（三门",
					price: "1515",
					delprice: "2300",
					comment: "1000+",
					percent: "98%好评率"
				}, {
					image: "../../static/9.jpg",
					cont: "木月北欧推拉门衣柜组合卧室简约现代滑门移动大衣柜储物收纳衣柜 雅致 单衣柜1.6米（三门",
					price: "1515",
					delprice: "2300",
					comment: "1000+",
					percent: "98%好评率"
				}, {
					image: "../../static/9.jpg",
					cont: "木月北欧推拉门衣柜组合卧室简约现代滑门移动大衣柜储物收纳衣柜 雅致 单衣柜1.6米（三门",
					price: "1515",
					delprice: "2300",
					comment: "1000+",
					percent: "98%好评率"
				}, {
					image: "../../static/9.jpg",
					cont: "木月北欧推拉门衣柜组合卧室简约现代滑门移动大衣柜储物收纳衣柜 雅致 单衣柜1.6米（三门",
					price: "1515",
					delprice: "2300",
					comment: "1000+",
					percent: "98%好评率"
				}, {
					image: "../../static/9.jpg",
					cont: "木月北欧推拉门衣柜组合卧室简约现代滑门移动大衣柜储物收纳衣柜 雅致 单衣柜1.6米（三门",
					price: "1515",
					delprice: "2300",
					comment: "1000+",
					percent: "98%好评率"
				}],
				imgarr: ["../../static/6.jpg", "../../static/7.jpg", "../../static/xie.jpg", "../../static/5.jpg"],
				arr: ["首页", "图书馆", "食品饮料", "美妆", "手机", "医药健康", "电脑办公"],
				arr2: ["../../static/1.jpg", "../../static/2.jpg", "../../static/3.jpg"],
				arr3: [{
					arr1: [{
						tubiao: "iconfont icon-gouwucheman",
						biaoti: "京东超市"
					}, {
						tubiao: "iconfont icon-zhuangxiushangjia-",
						biaoti: "京东家电"
					}, {
						tubiao: "iconfont icon-yifu",
						biaoti: "京东服饰"
					}, {
						tubiao: "iconfont icon-shouji",
						biaoti: "京东手机"
					}, {
						tubiao: "iconfont icon-caifu",
						biaoti: "财富岛"
					}],
					arr2: [{
						tubiao: "iconfont icon-shengxian",
						biaoti: "京东生鲜"
					}, {
						tubiao: "iconfont icon-douzi",
						biaoti: "领京豆"
					}, {
						tubiao: "iconfont icon-youhuiquan",
						biaoti: "领优惠券"
					}, {
						tubiao: "iconfont icon-shuiguo",
						biaoti: "免费水果"
					}, {
						tubiao: "iconfont icon-xianjinliuliangbiao",
						biaoti: "领现金"
					}]
				}, {
					arr1: [{
						tubiao: "iconfont icon-servicejinkoubaoshui",
						biaoti: "京东国际"
					}, {
						tubiao: "iconfont icon-judge",
						biaoti: "京东拍卖"
					}, {
						tubiao: "iconfont icon-paipaifenqiyong",
						biaoti: "拍拍二手"
					}, {
						tubiao: "iconfont icon-jiazai",
						biaoti: "沃尔玛"
					}, {
						tubiao: "iconfont icon-diannao",
						biaoti: "电脑"
					}],
					arr2: [{
						tubiao: "iconfont icon-jiankang",
						biaoti: "京东健康"
					}, {
						tubiao: "iconfont icon-chongzhi",
						biaoti: "充值中心"
					}, {
						tubiao: "iconfont icon-jingdongdaojia",
						biaoti: "京东到家"
					}, {
						tubiao: "iconfont icon-meizhuang",
						biaoti: "美妆馆"
					}, {
						tubiao: "iconfont icon-qiyeneigou",
						biaoti: "京东内购"
					}]
				}, {
					arr1: [{
						tubiao: "iconfont icon-nvzhuang",
						biaoti: "女装"
					}, {
						tubiao: "iconfont icon-shumaxiangji",
						biaoti: "数码电器"
					}, {
						tubiao: "iconfont icon-jijian_weijihuo",
						biaoti: "寄件服务"
					}, {
						tubiao: "iconfont icon-heziguanligenduoshangpinkeji",
						biaoti: "新品首发"
					}, {
						tubiao: "iconfont icon-jiaju",
						biaoti: "京东家居"
					}],
					arr2: [{
						tubiao: "iconfont icon-tushu",
						biaoti: "京东图书"
					}, {
						tubiao: "iconfont icon-chongzhi",
						biaoti: "发现好货"
					}, {
						tubiao: "iconfont icon-nanzhuang",
						biaoti: "男装"
					}, {
						tubiao: "iconfont icon-muyingwanju",
						biaoti: "母婴"
					}, {
						tubiao: "iconfont icon-leimupinleifenleileibie",
						biaoti: "全部频道"
					}]
				}],
				arr4: [{
					image: "../../static/xie.jpg",
					nowprice: "999",
					oldprice: "1999"
				}, {
					image: "../../static/xie.jpg",
					nowprice: "822",
					oldprice: "1888"
				}, {
					image: "../../static/xie.jpg",
					nowprice: "1254",
					oldprice: "1777"
				}, {
					image: "../../static/xie.jpg",
					nowprice: "1254",
					oldprice: "1777"
				}, {
					image: "../../static/xie.jpg",
					nowprice: "1254",
					oldprice: "1777"
				}, {
					image: "../../static/xie.jpg",
					nowprice: "1254",
					oldprice: "1777"
				}, {
					image: "../../static/xie.jpg",
					nowprice: "1254",
					oldprice: "1777"
				}],
				openid: ""
			}
		},
		methods: {
			// 获取token
			register() {
				// wx.request({
				// 	url: "http://api_devs.wanxikeji.cn/api/register",
				// 	method: "POST",
				// 	data: {
				// 		name: "羊吃毛",
				// 		pw: "123456",
				// 		openid: this.openid,
				// 		nick_name: "羊吃毛",
				// 		icon: "333"
				// 	},
				// 	success: res => {
				// 		console.log(res)
				// 		// wx.setStorageSync("token", res.data.data.token)

				// 	}
				// })
				// console.log(this.data)
				wx.request({
					url: "http://api_devs.wanxikeji.cn/api/refreshToken",
					method: "POST",
					data: {
						openid: this.openid
					},
					success: res => {
						console.log(res)
						wx.setStorageSync("token", res.data.data.token)

					}
				})
			},


			pathTo() {
				console.log(123)
				uni.navigateTo({
					url: "../details/details?good_id=1243",

				})
			}
		},

		onLoad() {
			// 获取openid
			wx.login({
				success: res => {
					console.log(res)
					// wx.setStorageSync("code", res.code)
					// this.code = res.code
					wx.request({
						url: "http://api_devs.wanxikeji.cn/api/codeExchangeOpenid",
						method: "POST",
						data: {
							code: res.code
						},
						success: ress => {
							console.log(ress.data.data.openid)
							this.openid = ress.data.data.openid
							this.register()
						}
					})
				}
			})
			
		
		},
		// methods: {
		// 	details() {s
		// 		uni.navigateTo(
		// 			URL: '../details/details.vue'
		// 		)
		// 	}
		// }
	}
</script>

<style>
	page {
		background: #f4f4f4;
	}

	.head {
		height: 300rpx;
		background-color: #C72517;
		width: 100%;
	}

	.headb {
		position: fixed;
		top: 0;
		z-index: 100;
		background-color: #C72517;
		width: 100%;
		padding-bottom: 10px;
		box-sizing: border-box;
	}

	.inputbox {
		padding: 20rpx;
		box-sizing: border-box;
		width: 100%;
	}

	input {
		width: 100%;
		background-color: #FFFFFF;
		height: 60rpx;
		border-radius: 60rpx;
		padding: 0 30px;
		box-sizing: border-box;
	}

	.icon-sousuo {
		position: absolute;
		font-size: 20px !important;
		top: 16px;
		left: 20px;
	}

	.icon-xiangji {
		position: absolute;
		font-size: 20px !important;
		top: 16px;
		right: 20px;
	}

	.icon-xiala1 {
		font-size: 12px !important;
		color: #FFFFFF;
		margin-top: 5px !important;
	}

	swiper {
		width: 100%;
	}

	swiper-item {
		width: 100%;
	}

	.navbox {

		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		overflow: auto;
		overflow-x: scroll;
		font-size: 15px;
		color: #FFFFFF;
	}

	.scroll-view {
		color: #FFFFFF;
	}

	.nav {}

	.lunbo {
		width: 100%;
		margin-top: -60px;
	}

	.lunbo .content {
		overflow: hidden;
		width: 340px;
		border-radius: 20px;
		margin: 0 auto;
	}

	.lunbo .content .banner {
		width: 100%;
		height: 300rpx;
	}

	.bigbox {
		display: flex;
		justify-content: space-around;
		margin-top: 10px;
	}

	.icfontbox {
		display: inline-block;
		width: 55px;
	}

	.icfontbox>view {
		text-align: center;
		color: #FA4E46;
	}

	.icfontbox .biaoti {
		color: #999999;
		font-size: 13px;
		margin-top: 5px;
	}


	.box {
		width: 96%;
		background-color: #FFFFFF;
		border-radius: 5px;
		margin: 0 auto;
		padding: 10px;
		box-sizing: border-box;
		margin-bottom: 10px;
	}

	.title {
		display: flex;
		justify-content: space-between;
	}

	.seckillingbox {
		display: flex;
		justify-content: space-between;
	}

	.seckilling {
		font-size: 16px;
		font-weight: 700;
	}

	.time {
		/* text-align: center; */
		height: 20px;
		width: 78px;
		border-radius: 20px;
		border: 1px solid #FA2201;
		line-height: 20px;
		overflow: auto;
		font-size: 8px;
		margin-left: 5px;
		margin-top: 1px;
	}

	.times {
		height: 40px;
		padding: 0 5px;
		box-sizing: border-box;
		display: inline-block !important;
		color: #FFFFFF;
		background-color: #FA2201;

	}

	.countdown {
		margin-left: 5px;
		color: #FA2201;
	}

	.snapupbox {
		display: flex;
		justify-content: space-between;
		margin-top: 3px;
	}

	.snapup {
		font-size: 10px;
		color: #999999;
		font-weight: 700;
	}

	.icon-xiangyou {
		font-size: 10px !important;
		font-weight: 700 !important;
		margin-top: 2px;
	}

	.tu {
		width: 70px;
		height: 70px;
	}

	.nowprice {
		color: #FA2201;
		font-size: 16px;
		font-weight: 700;
		text-align: center;
	}

	.nowprice .dollar {
		font-size: 10px;
	}

	.scrollbox .oldprice {
		font-size: 10px !important;
		color: #999999;
		text-align: center;
	}

	.scrollbox {
		margin-top: 20px;
	}

	.ones {
		display: inline-block;
		margin-right: 10px;
	}

	.wire {
		height: 1px;
		background-color: #C0C0C0;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.recommendbox {
		display: flex;
		justify-content: space-between;
	}

	.recommendbox .name {
		font-size: 16px;
		font-weight: 700;
	}

	.recommendimg {
		width: 155rpx;
		height: 155rpx;
	}

	.recommendbox .special {
		font-size: 10px;
		margin-top: 5px;
		margin-bottom: 10px;
	}

	.recommendbox .special1 {
		color: #5F38E4;
	}

	.recommendbox .special2 {
		color: #CE3E4F;
	}

	.recommendbox .special3 {
		color: #DA6632;
	}

	.recommendbox .special4 {
		color: #4885ED;
	}

	.courtyardbox {
		display: flex;
		justify-content: space-between;
	}

	.courtyard {
		display: flex;
		justify-content: space-between;
	}

	.courtyard1 {
		margin-right: 20px;
	}

	.master {
		font-size: 15px;
	}

	.seeding {
		font-size: 10px;
		color: rgb(212, 100, 57);
		border: 1px rgb(212, 100, 57) solid;
		border-radius: 20px;
		padding: 2px;
		box-sizing: border-box;
		margin-left: 5px;
	}

	.promote {
		font-size: 10px;
		color: #F436E7;
		border: 1px #F436E7 solid;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 2px;
		margin-left: 5px;
	}

	.imagesbox {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}

	.courtyardimage {
		width: 155rpx;
		height: 155rpx;
		border-radius: 10px;
	}

	.lastbox {
		width: 45%;
		background-color: #FFFFFF;
		border-radius: 10px;
		overflow: auto;
		margin: 5px 5px 5px 10px;
		display: inline-block;
	}

	.lastbox .cont {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 14px;
		margin: 0 5px 5px 5px;
	}

	.lastbox .tu {
		width: 100%;
		height: 150px;
	}

	.floorpricebox {
		background-color: #FFEEF4;
		display: inline-block;
		font-size: 12px;
		margin-left: 5px;
		padding: 3px;
		box-sizing: border-box;
		color: #FF639D;
		margin-bottom: 8px;
	}

	.price {
		margin: 0 10px;
	}

	.priceone {
		color: #FF4141;
		font-size: 12px;
		font-weight: 700;
	}

	.pricetwo {
		color: #FF4141;
		font-size: 17px;
		font-weight: 700;
		margin-right: 4px;
	}

	.pricedel {
		font-size: 13px;
		font-weight: 700;
		color: #999999;
		text-decoration: line-through;
		margin-left: 0 4px;
	}

	.seckill {
		font-size: 12px;
		color: #FF639D;
		border: 1px solid #FF639D;
		display: inline-block;
	}

	.commentbox {
		color: #999999;
		font-size: 11px;
		margin: 10px;
	}

	.percent {
		margin-left: 10px;
	}

	::-webkit-scrollbar {
		/* width: 0;
	height: 0;
	color: transparent; */
		display: none;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	@font-face {
		font-family: 'iconfont';
		font-weight: normal;
		font-style: normal;
		src: url(data:font/truetype;charset=utf-8;base64,转换的base64内容) format('truetype');
	}

	.iconfont {
		font-family: 'iconfont' !important;
		font-size: 30px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-message:before {
		content: "\e604";
	}
</style>
